
<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <el-row type="flex" class="block_1 flex-row">
          <el-col :span="6">
            <div class="group_1 flex-row">
              <img
                @click="toPage('/')"
                class="label_1"
                referrerpolicy="no-referrer"
                src="@/assets/logo@2x.png"
              /></div
          ></el-col>
          <el-col :span="6">
            <div class="group__2 justify-start">
              <span style="color: #5cfbff">后台管理中心</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="group__3 justify-end">
              <div>
                <el-dropdown>
                  <span class="el-dropdown-link">
                    <img class="icon1" src="@/assets/user@2x.png" />
                    <img class="icon1" src="@/assets/xiala@2x.png" />
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item divided @click.native="adminDetail">
                      <span style="display: block">个人详情</span>
                    </el-dropdown-item>
                    <el-dropdown-item divided @click.native="logout">
                      <span style="display: block">退出登录</span>
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
              <div class="divide-line"></div>
              <img
                class="icon1"
                src="@/assets/shouye@2x.png"
                @click="toPage('/')"
              />
            </div>
          </el-col>
        </el-row>
      </el-header>
      <el-container>
        <el-aside width="292px">
          <el-menu
            class="el-menu-vertical-demo"
            active-text-color="#fff"
            background-color="#212226"
            :default-active="currentPath"
            text-color="#949BA4"
            :router="true"
          >
            <template v-for="m in menus">
              <template v-if="m.children && m.children.length > 0">
                <el-submenu
                  :index="m.path"
                  :key="`#${m.id}`"
                  @click.native="toPage(m.path)"
                >
                  <template slot="title">
                    <img src="@/assets/yonghu.png" v-if="m.id == 3" />
                    {{ m.name }}</template
                  >
                  <el-menu-item
                    v-for="mc in m.children"
                    :index="mc.path"
                    :key="mc.id"
                    @click.native.stop="toPage(mc.path)"
                    >{{ mc.name }}</el-menu-item
                  >
                </el-submenu>
              </template>
              <template v-else>
                <el-menu-item :index="m.path" :key="m.id">
                  <!-- <i :class="m.icon"></i> -->
                  <img src="@/assets/yewu.png" v-if="m.id == 1" />
                  <img src="@/assets/renyuan.png" v-if="m.id == 2" />
                  <img src="@/assets/baojing.png" v-if="m.id == 4" />
                  <img
                    src="@/assets/warn.png"
                    style="width: 20px; height: 20px"
                    v-if="m.id == 5"
                  />
                  <img
                    src="@/assets/camera.png"
                    style="width: 20px; height: 20px"
                    v-if="m.id == 6"
                  />
                  {{ m.name }}
                </el-menu-item>
              </template>
            </template>
          </el-menu>
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>

    <el-dialog
      :modal-append-to-body="false"
      title="账号详情"
      :visible.sync="visible"
      width="30%"
    >
      <admin-detail v-if="visible"></admin-detail
    ></el-dialog>
  </div>
</template>

<script>
import AdminDetail from "./components/AdminDetail.vue";
export default {
  components: {
    AdminDetail,
  },
  data() {
    return {
      menus: [
        // {
        //   name: "业务管理",
        //   id: "1",
        //   path: "/homePage/businessManagement",
        //   icon: "@/assets/yewu.png",
        //   children: [],
        // },
        {
          name: "预警管理",
          id: "5",
          path: "/homePage/warningManagement",
          icon: "@/assets/warn.png",
          children: [],
        },
        {
          name: "摄像机管理",
          id: "6",
          path: "/homePage/CameraManagement",
          icon: "@/assets/camera.png",
          children: [],
        },
        {
          name: "人员库管理",
          id: "2",
          path: "/homePage/pdManagement",
          icon: "@/assets/renyuan.png",
          children: [],
        },

        {
          name: "用户管理",
          id: "3",
          icon: "@/assets/yonghu.png",
          path: "/homePage/userManagement",
          children: [
            {
              name: "组织管理",
              id: "1",
              path: "/homePage/organizationalManagement",
            },
            {
              name: "权限角色",
              id: "2",
              path: "/homePage/rightsManagement",
            },
          ],
        },
        //
        // {
        //   name: "报警等级管理",
        //   id: "4",
        //   icon: "../../assets/baojing.png",
        //   path: "/homePage/alarmLevel",
        //   children: [],
        // },
      ],

      currentPath: "/homePage/businessManagement",
      visible: false,
    };
  },
  mounted() {
    this.currentPath = this.$route.path;
  },
  methods: {
    //页面跳转
    toPage(path) {
      this.$router.push(path);
    },

    //个人详情
    adminDetail() {
      this.visible = true;
    },

    //退出登录
    logout() {
      this.$store.dispatch("user/logout").then(() => {
        this.$router.push("/login");
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.el-header {
  padding: 0;
}
.el-menu {
  border-right: 0;
  height: 1080px;
  margin-top: 9px;
  padding-top: 23px;
}
.el-submenu,
.el-menu-item {
  text-align: left;
}

.el-main {
  //   background: red;
  margin-top: 9px;
}

.box-card {
  width: 100%;
  height: 100%;
  background: #303136;
  border: 0;
  box-shadow: 0;
}
.common-layout {
  background: #303136;
  .block_1 {
    // background-color: rgba(48, 49, 54, 1);
    width: 100%;
    height: 66px;
    .group_1 {
      width: 440px;
      height: 66px;
      border: 1px gradient;
      .label_1 {
        width: 440px;
        height: 66px;
        cursor: pointer;
      }
    }

    .group__2 {
      align-items: center;
      height: 66px;
      font-size: 16px;
      font-weight: 600;
    }

    .group__3 {
      align-items: center;
      height: 66px;
      //   justify-content: space-evenly;
      padding-right: 26px;
      .icon1 {
        width: 24px;
        height: 24px;
        cursor: pointer;
      }

      .divide-line {
        width: 1px;
        height: 16px;
        background-color: rgba(255, 255, 255, 0.5);
        margin: 0 16px;
      }
    }
  }
}
</style>

